<template>
  <div>
    <div class="k-spreadsheet-toolbar-header">
      <k-button style="margin-bottom:5px" :icon="'excel'" :class="'k-primary'" @click="exportExcel">导出Excel</k-button>
    </div>
    <spreadsheet
      v-if="visibleSpreadsheet"
      ref="spreadsheet"
      :columns="20"
      :rows="100"
      :toolbar="true"
      :sheetsbar="false"
      :excel-file-name="fileName"
      :excel-export="function(e){

      }"
    >
      <spreadsheet-sheet
        :name="'周报统计'"
        :data-source="datasource"
        :rows="rows"
        :columns="columns"
        :merged-cells="mergedCells"
      />
    </spreadsheet>
  </div>
</template>

<script>
  import { Button } from '@progress/kendo-buttons-vue-wrapper'
  import { Spreadsheet, SpreadsheetSheet } from '@progress/kendo-spreadsheet-vue-wrapper'
  import JSZip from 'jszip'
  window.JSZip = JSZip
  export default {
    name: 'PrjmemberWeekly',
    components: {
      'spreadsheet': Spreadsheet,
      'spreadsheet-sheet': SpreadsheetSheet,
      'k-button': Button
    },
    data: function() {
      return {
        fileName: '',
        mergedCells: [],
        dialogName: this.$attrs ? (this.$attrs.data ? (this.$attrs.data.dialogName ? this.$attrs.data.dialogName : '') : '') : '',
        visibleSpreadsheet: false,
        rows: [],
        columns: [
          { width: 35 },
          { width: 80 },
          { width: 180 },
          { width: 100 },
          { width: 100 },
          { width: 120 },
          { width: 300 },
          { width: 240 },
          { width: 300 }
        ],
        datasource: {}
      }
    },
    mounted: function() {
      this.initSpreadsheetStyles().then(_ => {
        this.visibleSpreadsheet = true
        this.$nextTick(() => {
          const spreadsheet = this.$refs.spreadsheet.kendoWidget()
          this.hideRow(spreadsheet, '0')
          this.hideColumn(spreadsheet, '9,10,11,12,13,14,15,16,17,18,19')
          spreadsheet.element.css('height', '550px')
          spreadsheet.element.css('width', '100%')
          spreadsheet.resize()
          // 获取参数
          const that_ = this
          const dataSource = {
            transport: {
              read: function(options) {
                // eslint-disable-next-line no-undef
                that_.$post('/service/prjMng/prjMemberMng/weekly/initPrjMemberStaWeeklyContent', that_.$attrs.data.param).then(res => {
                  if (res.code !== 200) {
                    that_.$KendoNotify({
                      title: '错误信息:' + res.code,
                      message: res.message
                    }, 'error')
                  } else {
                    options.success(res.data.list)
                  }
                })
              }
            },
            schema: {
              model: {
                id: 'id',
                fields: {
                  arg1: { type: 'string' },
                  arg2: { type: 'string' },
                  arg3: { type: 'string' },
                  arg4: { type: 'string' },
                  arg5: { type: 'string' },
                  arg6: { type: 'string' },
                  arg7: { type: 'string' },
                  arg8: { type: 'string' },
                  arg9: { type: 'string' },
                  id: { type: 'string' }
                }
              }
            }
          }
          spreadsheet.sheetByIndex(0).setDataSource(dataSource)
        })
      })
    },
    methods: {
      hideRow(spreadsheet, rows) {
        rows.split(',').forEach(str => {
          spreadsheet.sheetByIndex(0).hideRow(Number(str))
        })
      },
      hideColumn(spreadsheet, columns) {
        columns.split(',').forEach(str => {
          spreadsheet.sheetByIndex(0).hideColumn(Number(str))
        })
      },
      async initSpreadsheetStyles() {
        let initParamData = this.$attrs.data.param
        if (!initParamData || Object.keys(initParamData).length < 0) {
          initParamData = {}
        }
        Object.keys(initParamData).forEach(key => {
          if (Array.isArray(initParamData[key])) {
            if (initParamData[key].length < 1) {
              initParamData[key] = ''
            } else {
              initParamData[key] = initParamData[key].join(',')
            }
          }
        })
        await this.$post('/service/prjMng/prjMemberMng/weekly/initPrjMemberStaWeeklyFormat', initParamData).then(res => {
          if (res.code !== 200) {
            this.$KendoNotify({
              title: '错误信息:' + res.code,
              message: res.message
            }, 'error')
            this.rows = []
          } else {
            this.rows = res.data.list
            this.mergedCells = res.data.mergedCells
            this.fileName = `天阳科技周报-${res.data.startDate}至${res.data.endDate}.xlsx`
          }
        })
      },
      save() {
        const spreadsheet = this.$refs.spreadsheet.kendoWidget()
        // eslint-disable-next-line no-undef
        spreadsheet.sheetByIndex(0).dataSource.sync()
      },
      exportExcel() {
        const spreadsheet = this.$refs.spreadsheet.kendoWidget()
        spreadsheet.saveAsExcel(spreadsheet.options)
      }
    }
  }
</script>

<style>
    .k-spreadsheet-toolbar-header>button:not(:first-child){
    margin-left: 10px;
  }
</style>
